@import "~src/web/variables";

:host {
    & > .modal {
        display: block;
        position: relative;

        @media (min-width: #{map-get($grid-breakpoints, sm)}) and (max-width: #{map-get($grid-breakpoints, lg)}) {
            .modal-dialog {
                margin: $modal-dialog-margin;
                max-width: none;
            }
        }

        & > .modal-dialog > .modal-content > .modal-body {
            & > .wrapper {
                & > .list-group {
                    margin: 0 0 $app-spacer-3;
                }

                @media (min-width: #{map-get($grid-breakpoints, sm)}) {
                    display: flex;

                    & > .list-group {
                        flex-grow: 0;
                        display: flex;
                        margin: 0 $app-spacer-3 0 0;
                    }

                    &::ng-deep {
                        & > router-outlet {
                            & + * {
                                flex-grow: 100;
                            }
                        }
                    }
                }
            }
        }
    }
}
